<template>
    <div>
        <el-container>
            <el-header>
                <div style="text-align: left">
                    <el-form :inline="true"  class="query-form" size="mini">
                        <el-form-item class="query-form-item">
                            <el-input  placeholder="权限名称"></el-input>
                        </el-form-item>
                        <el-form-item class="query-form-item">
                            <el-select  placeholder="状态">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="禁用" value="0"></el-option>
                                <el-option label="正常" value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button-group>
                                <el-button type="danger" plain icon="el-icon-refresh" ></el-button>
                                <el-button type="danger" plain icon="search" >查询</el-button>
                                <el-button type="danger" plain @click="dialogAddPermission=true">新增</el-button>
                            </el-button-group>
                        </el-form-item>
                    </el-form>
                    
                    
                </div>
            </el-header>
            <el-divider></el-divider>
            <el-main>
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                    label="权限编号"
                    width="180"
                    prop="id">
                    
                    </el-table-column>
                    <el-table-column
                    label="权限名称"
                    width="180"
                    prop="name">
                    
                    </el-table-column>
                    <el-table-column
                    label="权限路径"
                    width="180"
                    prop="url">
                    
                    </el-table-column>
                    
                    <el-table-column
                    label="角色"
                    width="180"
                    >
                        <template slot-scope="scope">
                            <el-checkbox label="管理员"></el-checkbox>
                            <el-checkbox label="运营"></el-checkbox>
                            <el-checkbox label="采购"></el-checkbox>
                            <el-checkbox label="财务"></el-checkbox>
                            <el-checkbox label="运营助理"></el-checkbox>
                        </template>
                    
                    </el-table-column>
                    
                    <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="danger" 
                        plain
                        @click="permissionEdit=true">编辑</el-button>

                        <el-button
                        size="mini"
                        type="danger" 
                        plain
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="100">
                </el-pagination>
            </el-footer>
        </el-container>
        <!-- 编辑权限 -->
        <div style="text-align: left">
            <el-dialog title="修改权限" :visible.sync="permissionEdit">
                <el-form >
                    <el-form-item label="权限名称：" :label-width="formLabelWidth">
                        <el-input  autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="权限路径：" :label-width="formLabelWidth">
                        <el-input  autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="权限分组：" :label-width="formLabelWidth">
                            <el-checkbox label="管理员"></el-checkbox>
                            <el-checkbox label="运营"></el-checkbox>
                            <el-checkbox label="采购"></el-checkbox>
                            <el-checkbox label="财务"></el-checkbox>
                            <el-checkbox label="运营助理"></el-checkbox>
                    </el-form-item>
                    
                    
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="permissionEdit = false">取 消</el-button>
                    <el-button type="danger" plain @click="permissionEdit = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 添加权限 -->
        <div style="text-align: left">
            <el-dialog title="新增权限" :visible.sync="dialogAddPermission">
                <el-form >
                    <el-form-item label="权限名称：" :label-width="formLabelWidth">
                        <el-input  autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="权限路径：" :label-width="formLabelWidth">
                        <el-input  autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="权限分组：" :label-width="formLabelWidth">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="权限角色：" :label-width="formLabelWidth">
                            <el-checkbox label="管理员" v-model="selected"></el-checkbox>
                            <el-checkbox label="运营"></el-checkbox>
                            <el-checkbox label="采购"></el-checkbox>
                            <el-checkbox label="财务"></el-checkbox>
                            <el-checkbox label="运营助理"></el-checkbox>
                    </el-form-item>
                    
                    
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogAddPermission = false">取 消</el-button>
                    <el-button type="danger" plain @click="dialogAddPermission = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            dialogAddPermission: false,
            formLabelWidth: '120px',
            permissionEdit: false,
            currentPage: 1,
            tableData: [
                {
                    id: '001001',
                    name: '商品管理',
                    url: '/index/goods',
                    
                },
                {
                    id: '002001',
                    name: '分类管理',
                    url: '/index/cate',
                    
                },
                {
                    id: '003001',
                    name: '广告管理',
                    url: '/index/advertising',
                    
                },
                // {
                //     id: '003002',
                //     name: '用户管理',
                //     url: '/index/users',
                    
                // },
                // {
                //     id: '003003',
                //     name: '角色管理',
                //     url: '/index/role',
                    
                // },
            ],
            options: [
                {
                    id: '001',
                    name: '管理员',
                    status: '正常',
                    desc: '网站管理员，拥有最高权限'
                }, 
                {
                    id: '002',
                    name: '采购',
                    status: '正常',
                    desc: '商品采购，负责网站内商品的采购工作'
                },
                {
                    id: '003',
                    name: '运营',
                    status: '正常',
                    desc: '网站运营人员，负责网站的运营工作'
                },
                {
                    id: '004',
                    name: '财务',
                    status: '正常',
                    desc: '公司财务，负责公司的进销存往来账款'
                }, 
                {
                    id: '005',
                    name: '运营助理',
                    status: '正常',
                    desc: '负责帮助运营经理搞好销售业绩'
                }, 
            ],
            value: '001',  // 默认角色
            selected: true,
        }
    },
    methods: {
        handleDelete(index, row) {
            console.log(index, row);
        },
        // 分页的方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
